<template>
  <el-form ref="formRef" :model="form" label-width="80px">
      <el-form-item label="分类名称" prop="name">
       <el-input v-model="form.name" placeholder="请填写分类名称"/>
      </el-form-item>
       <!-- 二级分类 -->
      <el-form-item label="二级分类">
       <el-radio-group v-model="showMore">
         <el-radio :label="false" size="large">一级分类</el-radio>
         <el-radio :label="true"  size="large">二级分类</el-radio>
       </el-radio-group>
   </el-form-item>
      <!-- 分类选择 -->
      <el-form-item v-show="showMore" label="上级分类" prop="pid">
     <el-select v-model="form.pid" placeholder="请选择上级分类名称" >
       <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
     </el-select>
   </el-form-item>
    <!-- 操作按钮 -->
    <el-form-item>
      <el-button type="primary" @click="editSubmit" v-if="id">修改</el-button>
      <el-button type="primary" @click="addSubmit" v-else>新增</el-button>
      <el-button @click="btnCancel">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref,reactive,onMounted} from 'vue'
import { addCategory, getCategory, getCategorylist, updateCategory } from '../api/api'
const props=defineProps({
  id:{
    type:Number
  }
})
const form=reactive({
  id:props.id,
  name:'',
  pid:''
})
const formRef=ref()
const categoryList=ref([])
const showMore=ref(false)
const emit=defineEmits(['success'])

onMounted(()=>{
  loadCategory()
})
const resetForm=id=>{
  form.id=id;
  btnCancel()
}
defineExpose({resetForm})

const btnCancel=()=>{
  formRef.value.resetFields()
  loadCategory()
}
const loadCategory=async()=>{
  if(form.id){
    const data=await getCategory({id:form.id})
    Object.assign(form,data)
  }
  categoryList.value=await getCategorylist()
}
const editSubmit=async()=>{
  if(await updateCategory(from)){
    emit('success')
  }
}
const addSubmit=async()=>{
  const data={
    name:form.name,
    pid:form.pid,

  }
  if(await addCategory(data)){
    emit('success')
  }
}
</script>


<!-- <script setup>
import {ref,reactive,onMounted} from 'vue'
import { addCategory, getCategory, getCategorylist ,updateCategory} from '../api/api'

const props=defineProps({
  id:{
    type:Number
  }
})
const emit=defineEmits(['success'])

const form=reactive({
  id:props.id,
  name:'',
  pid:''
})
const formRef=ref()
const showMore=ref(false)
const categoryList=ref([])

onMounted(()=>{
  loadCategory()
})

const resetForm=id=>{
  form.id=id
  btnCancel()
}
defineExpose({resetForm})
const btnCancel=()=>{
  formRef.value.resetFields()
  loadCategory()
}

const loadCategory=async()=>{
  if(form.id){
    const data=await getCategory({id:form.id})
    Object.assign(form,data)
  }
  const list=await getCategorylist();
  categoryList.value=list.filter(item=>item.pid==0)
  showMore.value=form.pid!=0
}

const editSubmit=async()=>{
  if(await updateCategory(form)){
    emit('success')
  }
}
const addSubmit=async()=>{
  const data={
    name:form.name,
    pid:form.pid,
  }
  if(await addCategory(data)){
    emit('success')
  }
}
</script> -->